<!--
    group: 发票管理
    name: 开票列表
    item: 结算/批量结算---（有待支付的订单==>重新选择发票数据弹层）
-->
<template>
  <a-modal
    :width="config.width"
    :footer="null"
    :title="config.modalTitle"
    :destroyOnClose="true"
    v-model="config.visible"
  >
    <div class="estimated">
      <h5>您选择企业存在待支付订单，请选择要合并结算的开票申请：</h5>

      <h4 class="mTop">本次结算的开票申请：</h4>
      <a-table
        bordered  size="small"
        :rowKey="row => row.id"
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="currentlyData"
        :scroll="{y: 200}"
        :pagination="false"
      >
        <!--发票类型 1-专票 2-普票-->
        <span slot="taxType" slot-scope="text,record">
          <span v-if="text" :class="text === 1 ? 'd' : 'c'" style="margin-right: 5px">
            {{{1:'专票',2:'普票'}[text] || ''}}
          </span>
        </span>

      </a-table>

      <h4 class="mTop">待支付的开票申请：</h4>
      <a-table
        bordered  size="small"
        :rowKey="row => row.id"
        :row-selection="paySelection"
        :columns="columns"
        :data-source="bePaidData"
        :scroll="{y: 200}"
        :pagination="false"
      >
        <!--发票类型 1-专票 2-普票-->
        <span slot="taxType" slot-scope="text,record">
          <span v-if="text" :class="text === 1 ? 'd' : 'c'" style="margin-right: 5px">
            {{{1:'专票',2:'普票'}[text] || ''}}
          </span>
        </span>

      </a-table>

    </div>

    <div class="desc_btn">
      <a-button @click="mergeSettlement" type="primary" class="btnsLarge">合并结算已选项</a-button>
    </div>

  </a-modal>
</template>

<script>
import { cloneObject, conversionElement } from '@/utils/util'

export default {
  name: 'settlementRemainPaid',
  props:['config','checkList','toBePaidList'],
  data(){
    return{
      // config: {
      //   width: '800px',
      //   visible: false,
      //   ladderStatus: 1, //1-未跨阶梯  2-跨阶梯
      //   pendingOrders: 1, //1-有待支付订单  2-无待支付订单
      //   source: 3,    //来源  1-在途  2-无在途  3-单笔结算  4-批量结算
      // },

      //本次结算开票申请
      currentlyData: [],
      columns: [
        {
          title: '接票方',
          dataIndex: 'taxTitle',
          ellipsis: true,
          width: 230,
          align: 'center'
        },
        {
          title: '发票类型',
          dataIndex: 'taxType',
          width: 100,
          scopedSlots: {customRender: 'taxType'},
          align: 'center'
        },
        {
          title: '开票金额',
          dataIndex: 'amount',
          customRender: (text,record) => {
            if (text){
              return Math.round(text * 100)/10000 + '元'
            }
          },
          width: 120,
          align: 'center'
        },
      ],
      //待支付开票申请
      bePaidData: [],

      //已选中数据
      currentlySelectedRows:[],  //本次结算已选中数据
      bePaidSelectedRows:[],  //待支付已选中数据

      selectedRows:[],  //被选中综合数据
    }
  },
  watch: {
    'checkList': {
      handler(val){
        if (val && val.length > 0){
          this.currentlyData = cloneObject(val);
          this.currentlySelectedRows = this.currentlyData;
        }
      },
      deep: true,
      immediate: true,  //初始值执行函数
    },
    'toBePaidList': {
      handler(val){
        if (val && val.length > 0){
          this.bePaidData = cloneObject(val);
          this.bePaidSelectedRows = this.bePaidData;
        }
      },
      deep: true,
      immediate: true,  //初始值执行函数
    },
    'config': {
      handler(val){
        // console.log('settlementRemainPaid页面',val.visible)
        if (val.visible){
          //从待支付撤销结算过来的
          if (val.mark){
            this.currentlyData = cloneObject(this.checkList);
          }else {
            //过滤处理本次费用列表包含待支付数据问题
            let data = cloneObject(this.checkList);
            this.currentlyData = data.filter(item => !item.pendingOrders);
          }
          this.currentlySelectedRows = this.currentlyData;
          this.bePaidData = cloneObject(this.toBePaidList);
          this.bePaidSelectedRows = this.bePaidData;
        }
      },
      deep: true,
      immediate: false,  //初始值执行函数
    },
  },
  computed: {
    //本次结算
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.currentlySelectedRows = selectedRows;

          // 在这里可以根据selectedRows更新其他数据属性值
          this.updateDataProperty(selectedRows,this.currentlyData);
        },
        getCheckboxProps: record => {
          return {
            props: {
              defaultChecked: record.checkShow == true,
            }
          };
        },
      };
    },
    //待支付
    paySelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.bePaidSelectedRows = selectedRows;

          // 在这里可以根据selectedRows更新其他数据属性值
          this.updateDataProperty(selectedRows,this.bePaidData);
        },
        getCheckboxProps: record => {
          return {
            props: {
              defaultChecked: record.checkShow == true,
            }
          };
        },
      };
    },
  },
  methods: {
    //合并结算已选项
    mergeSettlement(){
      // this.selectedRows = this.currentlySelectedRows.concat(this.bePaidSelectedRows);
      this.selectedRows = [...this.currentlySelectedRows,...this.bePaidSelectedRows];

      if (this.selectedRows.length > 0){
        let bool = this.selectedRows.every(item => {
          return item.checkShow == true
        });

        //赋值选中数据
        if (bool){
          this.config.balanceCheckList = this.selectedRows;
        }else{
          //赋值选中数据
          this.config.balanceCheckList = this.selectedRows.filter(item => item.checkShow == true);
        }
        //子组件调用父组件方法
        // console.log('无跨阶梯 && 有待支付订单  settlementRemainPaid页面',this.config)
        this.$emit('toBePaidMethod',this.config);
      }else{
        this.$message.warning('请至少选择一项合并结算');
      }
    },
    //更新其他数据属性值---checkShow
    updateDataProperty(newList,oldList){
      if (newList.length > 0){
        //比对原数组和选中数组的id值 相同的赋值true
        for (let obj1 of oldList) {
          for (let obj2 of newList) {
            if (obj1.id == obj2.id) {
              // 假设我们想要更新name属性为value属性
              obj1.checkShow = true;
              break
            }else{
              obj1.checkShow = false;
            }
          }
        }
        return oldList
      }
    },
    //分转元
    conversion(num){
      return conversionElement(num);
    }
  }
}
</script>

<style scoped lang="less">
.mTop{
  margin-top: 30px;
}
.estimated{
  width: 100%;
  h5{
    //font-weight: bolder;
    font-size: 14px;
  }
}

.desc_btn{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 40px 0 20px 0;
  text-align: center;
}
.desc_btn a{
  margin-left: 10px;
  //text-decoration: underline;
}
</style>
